<template>
    <div class="back">
        <div>本次访问的网址有：</div>
        <div class="links">
            <el-checkbox-group v-model="recommendCheckedList">
                <el-checkbox v-for="item in recommendList" :key="item.guid" :label="item.guid">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </div>

        <div class="text-info">
            <el-link type="info" :underline="false">是否将这些也添加到我的常用模块里，方便您的访问</el-link>
        </div>

        <div class="text-info">
            <el-link v-show="recommendCheckedList.length <= 0 && !!showInfo" type="danger" :underline="false">还未选择需添加到我的常用模块的链接！</el-link>
        </div>

        <div class="btns">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        afterSubmit: {
            type: [Function,Boolean],
            default: false
        },
        recommondIds: {
            type: [String,Array],
            default: ""
        },
        dialogVisible:{
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            recommendList: [],
            recommendCheckedList:[],
            showInfo:false,
        };
    },
    watch: {
        dialogVisible: {
            handler(newValue, oldValue) {
                this.getData()
            }
        },
        recommendCheckedList:{
            deep:true,
            handler(n, o) {
                if(!!n && n.length > 0){
                    this.showInfo = false
                }
            }
        }
    },
    methods: {
        getData() {
            this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                login: ()=>{
                    this.$ajax({
                        type: "get",
                        url: `${this.$store.state.api.tbUrl}/home/recommondout.json`,
                        data: {},
                        callback: function (data, res) {
                            this.recommendList = data;
                            this.recommendCheckedList = data.map(item => item.guid);
                        },
                        error: function () {},
                    });
                }
            })
        },
        submit(){
            const that = this;
            let len = this.recommendCheckedList.length;
            if(len > 0){
                let idsString = [...that.recommendCheckedList,...that.recommondIds].toString();
                that.$ajax({
                    type: "post",
                    url: `${that.$store.state.api.tbUrl}/home/commonedit.json`,
                    data: {
                        navigates:idsString
                    },
                    callback: function (data, res) {
                        ShowMsg( '添加成功', 'success');
                        !!that.afterSubmit&&that.afterSubmit();
                    },
                    error: function () {},
                });
            }else{
                this.showInfo = true;
                return
            }
        },
        cancel(){
            this.$emit('cancel');
        }
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.back {
    .links {
        margin-top: 10px;
    }
    .text-info {
        margin-top: 20px;
    }
    .btns {
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        justify-content: center;

        .el-button {
            width: 100px;
        }
    }
}
</style>